<template>
  <div class="header">
    <div class="avater">
      <img src="../../../assets/img/profile/avatar.png"></img>
    </div>
    <div class="login-info">
      <div class="login">{{username || currentUser || '登录/注册'}}</div>
      <div class="phone">
        <img src="../../../assets/img/profile/phone.png"></img>
        暂无绑定手机号
      </div>
    </div>
    <div class="arrow">
      <img src="../../../assets/img/common/arrow-left.svg"></img>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ProfileHeader',
    computed: {
      currentUser() {
        return  this.$store.state.currentUser
      }
    },
    data() {
        return {
          username: ''
        }
    },
    created () {
      this.username = sessionStorage.getItem('username')
      if(this.username) {
        this.$store.commit('login')
      }
    }
  }
</script>

<style scoped>
.header {
  background-color: var(--color-tint);
  height: 100px;
  display: flex;
  align-items: center;
}
.avater {
  flex: 2;
  text-align: center;
}
.avater img {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: #f2f2f2;
}
.login-info {
  flex: 4;
  color: white;
}
.login {
  font-size: 20px;
  background-color: var(--color-tint);
  font-weight: 400;
  color: white;
  text-align: left;
  padding-bottom: 5px;
  padding-left: 5px;
}
.phone img{
  vertical-align: middle;
  height: 22px;
  width: 22px;
}
.arrow {
  flex: 1;
}
.arrow img {
  height: 35px;
  width: 35px;
}
</style>